<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts - Generate By @isea533/abel533</title>
    <style>*{ margin:0} html,body{ height:100%} .wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -155px} .footer,.push{ height:155px} table.gridtable{ font-family:verdana,arial,sans-serif; font-size:11px; color:#333; border-width:1px; border-color:#666; border-collapse:collapse; margin:5px auto} table.gridtable th{ border-width:1px; padding:8px; border-style:solid; border-color:#666; background-color:#dedede} table.gridtable td{ border-width:1px; padding:8px; border-style:solid; border-color:#666; background-color:#fff} .middle{ text-align:center; margin:0 auto; width:90%; height:auto} .info{ font-size:12px; text-align:center; line-height:20px; padding:40px} .info a{ margin:0 10px; text-decoration:none; color:green}</style>
</head>
<body>
<div class="wrapper">
    <div class="middle">
        <h1 style="padding: 70px 0 20px;">${option.left}</h1>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
    </div>
    <div class="push"></div>
</div>
<div class="footer">
    <div class="info">
        <h1 ><a href="/echarts" target="_blank">返回</a></h1> 
    </div>
</div>
</body>
<!-- ECharts单文件引入 -->
<script type="text/javascript" src="/webjars/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/webjars/echarts/dist/echarts.js"></script>
<script type="text/javascript" src="/webjars/echarts/dist/echarts.common.min.js"></script>
<!-- 
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
-->
<script type="text/javascript">
$(function () {
      // 基于准备好的dom，初始化echarts图表
	var myChart = echarts.init(document.getElementById('main'));
	// 为echarts对象加载数据
	// 指定图表的配置项和数据>测试数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    animation: false, // 关闭动画效果
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
	myChart.setOption(${option.right});		 
	var picBase64Info  = myChart.getDataURL();
	console.log(picBase64Info);
	//测试生成
	window.setTimeout(function() {	
	//function createimg() {
    		var param={
             "picInfo": picBase64Info
	     }
	     $.ajax({
	         type:'post',
	         url: "saveImage",
	         data: param,
	         success: function(msg) {
	             console.log(msg)
	             if(msg != "error"){
	                    console.log("the file is exit----------------")
	             }else{//文件保存成图片失败
	                    console.log("the file is not exit----------------")
	
	             }
	         },
	         error:function(){
	         }
	     });       
    }, 1000);
    //}
})
</script>
</html>
